<template>
    <div class="pages">
        <van-sticky>
            <div class="header">
                <div class="fls" @click="$router.back(-1)">
                    <img src="../../../static/images/icon-back.png" alt="">
                </div>
                <div class="centern">团队名称业绩</div>
                <div class="fls"></div>
            </div>
        </van-sticky>

        <div class="headersetbar">
            <div class="ibsethome" v-for="(item,index) in lister" :key="index" @click="barrnner(index)">
                <div :class="actives == index ? 'activesttse' :'' ">{{item}}</div>
                <div :class="actives == index ? 'xinatueao' :'' "></div>
            </div>
        </div>

        <div class="inrtebs">
            <div class="name_heade">
                <div class="flnametit">团队名称</div>
                <div class="flnametit" @click="yesterday()">
                    <div class="flater">
                        <div>昨日</div>
                        <div>交易金额</div>
                    </div>
                    <div class="swubs">
                        <img v-if="yesterdaymanny == 0" src="../../../static/images/iocn-sort-down.png" alt="">
                        <img v-if="yesterdaymanny == 1" src="../../../static/images/iocn-sort-up.png" alt="">
                    </div>
                </div>
                <div class="flnametit" @click="yesterdayarr()">
                    <div class="flater">
                        <div>昨日</div>
                        <div>交易笔数</div>
                    </div>
                    <div class="swubs">
                        <img v-if="yesterdayarrery == 0" src="../../../static/images/iocn-sort-down.png" alt="">
                        <img v-if="yesterdayarrery == 1" src="../../../static/images/iocn-sort-up.png" alt="">
                    </div>
                </div>
                <div class="flnametit">查看历史明细</div>
            </div>

            <div class="iubodyarrer" v-for="(item,index) in 20" :key="index">
                <div class="flnametit">
                    <div class="tebaudn">团队名称</div>
                </div>
                <div class="flnametit">
                    <div class="tebaudn">1324657890</div>
                </div>
                <div class="flnametit">
                    <div class="tebaudn">1324657890</div>
                </div>
                <div class="flnametit">
                    <div class="chakan" @click="iscker()">查看</div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    beforeCreate () {
        document.querySelector('body').setAttribute('style', 'background:#f5f5f5')
    },
      beforeDestroy () {
        // document.querySelector('body').setAttribute('style', '')
    },
    data(){
        return{
            // 昨日交易金额
            yesterdaymanny:0,
            // 昨日交易笔数
            yesterdayarrery:0,
            actives:0,
            lister:['团队','业务经理','直属商户']
        }
    },
    methods:{
        barrnner(index){
            this.actives = index
        },
        // 昨日交易金额
        yesterday(){
            if(this.yesterdaymanny == true){
                this.yesterdaymanny = false
            }else{
                this.yesterdaymanny = true
            }
        },
        // 昨日交易笔数
        yesterdayarr(){
            if(this.yesterdayarrery == true){
                this.yesterdayarrery = false
            }else{
                this.yesterdayarrery = true
            }
        },
        iscker(){
            this.$router.push({ name: "TeamPerformance" });
        },
    }
}
</script>

<style scoped>
    .pages{
        width: 100%;
    }
    .header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
        background: #3288FF;
    }
    .header>.fls{
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header>.fls>img{
        width: 100%;
        height: 100%;
    }
    .centern{
        color: #FFFFFF;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 17px;
        letter-spacing: 0px;
    }
    .headersetbar{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #FFFFFF;
        border-bottom: 1px solid #F2F2F2;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .ibsethome{
        width: 80px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: #828282;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .xinatueao{
        width: 80px;
        height: 4px;
        background: #3288FF;
        position: absolute;
        bottom: 0;
    }
    .activesttse{
        color: #333333;
        font-family: OPPOSans;
        font-weight: medium;
        font-size: 16px;
        letter-spacing: 0px;
    }
    .inrtebs{
        width: 100%;
        padding: 9px 16px;
        box-sizing: border-box;
        background: #FFFFFF;
    }


    .name_heade{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #F9FAFF;
        height: 48px;
    }


    .flnametit{
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333333;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .flnametit:nth-child(1){
        width: 20%;
    }
    .flnametit:nth-child(4){
        width: 30%;
    }

    .flater{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .swubs{
        width: 12px;
        height: 12px;
        margin-left: 4px;
        display: flex;
        align-items: center;
    }
    .swubs>img{
        width: 100%;
        height: 100%;
    }

    .iubodyarrer{
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .tebaudn{
        width: 100%;
        padding: 0 4px;
        box-sizing: border-box;
        height: 100%;
        text-align: center;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .chakan{
        width: 72px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: 1px solid #3288FF;
        color: #3288FF;
        font-family: OPPOSans;
        font-weight: regular;
        font-size: 13px;
        letter-spacing: 0px;
    }
</style>